<template>
  <div>
    <el-card>
    <el-descriptions :column="1" border style="font-size: 16px;">
      <el-descriptions-item label="ID">
        {{ userInfo.id }}
      </el-descriptions-item>
      <el-descriptions-item label="用户名">
        {{ userInfo.username }}
      </el-descriptions-item>
      <el-descriptions-item label="姓名">
        {{ userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号码">
        {{ userInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="电子邮件">
        {{ userInfo.email }}
      </el-descriptions-item>
      <el-descriptions-item label="工号">
        {{ userInfo.employeeCard }}
      </el-descriptions-item>
      <el-descriptions-item label="身份证">
        {{ userInfo.idCard }}
      </el-descriptions-item>
      <el-descriptions-item label="头像">
        <el-image
          v-if="userInfo.headUrl"
          fit="cover"
          :src="userInfo.headUrl"
          style="width: 100px; height: 100px;"
        ></el-image>
      </el-descriptions-item>

      <el-descriptions-item label="操作">
        <el-button type="primary" @click="editUserInfo">更改个人信息</el-button>
      </el-descriptions-item>

    </el-descriptions>

    <!-- 更改个人信息弹窗 -->
    <el-dialog
      title="编辑个人信息"
      :visible="dialogInfo"
      @close="dialogInfo = false"
    >
      <el-form :model="editedUserInfo" :rules="rules" ref="editForm" label-width="80px">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="editedUserInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮件" prop="email">
          <el-input v-model="editedUserInfo.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUserInfo">保存</el-button>
          <el-button @click="dialogInfo = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {

      // 这个是验证输入
      rules: {
        phone: [
          {
            required: true,
            message: '手机号码不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^\d{11}$/,
            message: '请输入11位数字的手机号码',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          }
        ]
      },

      // 这个是弹窗的展开
      dialogInfo: false, // 默认是不展开的

      // 测试用例
      userInfo: { },

      // 这个是用来保存编辑信息的
      editedUserInfo: {
        phone: '',
        email: ''
      }
    }
  },

  created () {
    // 一进入页面就请求个人信息
    this.getUserInfo()
  },

  methods: {

    // 请求用户信息
    getUserInfo () {
      axios.get('http://localhost:8080/pixington/system/manager/manager-details')
        .then((response) => {
        // 把请求回来的数据返回给用户
          this.userInfo = response.data
          // console.log(data)
        })
        .catch((err) => {
          this.$message({
            message: '请求出错',
            type: 'warning'
          })
          console.log(err)
        })
    },

    // 这个是更改个人信息弹窗的操作
    editUserInfo () {
      // 回显信息
      this.editedUserInfo.phone = this.userInfo.phone
      this.editedUserInfo.email = this.userInfo.email

      // 显示编辑对话框
      this.dialogInfo = true
    },

    // 提交用户的信息
    async saveUserInfo () {
      try {
        // 验证输入
        this.$refs.editForm.validate((valid) => {
          if (!valid) {
            this.$message({
              message: '请正确输入信息！',
              type: 'warning',
              duration: 2000
            })
          }
        })

        // 请求后端，更新后端数据
        await axios.post('http://localhost:8080/pixington/system/manager/setting/profile', {
          phone: this.editedUserInfo.phone,
          email: this.editedUserInfo.email

        })
          .then((response) => {
            this.$message({
              message: response.msg,
              type: 'success',
              duration: 2000
            })
          })
          .catch((err) => {
            console.log(err)
          })

        // 保存成功后关闭对话框
        this.dialogInfo = false
      } catch (error) {
        console.error('数据校验未通过或后端请求失败:', error)
      }
    }
  }
}
</script>

<style>

</style>
